<template>
  <view class="itemsList" v-if="showIf">
    <view class="items" v-for="(items, index) in itemIdList">
      <view class="top">
        <view class="itemName">
          {{ items.proName }}
        </view>
        <view class="learnMore" @click="learnMoreItem(index)">
          <a>点击了解更多</a>
          <image src="../../../static/addTwo.png" mode=""></image>
        </view>
      </view>

      <scroll-view class="scrollContainer" scroll-x>
        <view
          class="scrollitem"
          v-for="(item, index) in showdevelTeamList[index]"
          :key="index"
        >
          <view class="menbersImg">
            <u-avatar :src="item.headUrl"></u-avatar>
          </view>
          <!-- <view class="menbersName"> -->

          <a
            style="
              font-size: 35rpx;
              font-weight: 600;
              max-width: 120rpx;
              overflow: hidden;
              text-overflow: ellipsis;
            "
            >{{ item.userName }}</a
          >
          <!-- </view> -->
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getItemsId } from '../../../utils/modules/item.js'
import { getItemsMoreInfo } from '../../../utils/modules/item.js'
import { useMainStore } from '../../../stores/index.js'
import { getMenberSelfInfo } from '../../../utils/modules/member.js'
const mainStore = useMainStore()

const itemList = ref([])

function learnMoreItem(index) {
  mainStore.projectId = itemsMoreInfoList.value[index].projectId
  uni.navigateTo({
    url: './itemsInfo/itemsInfo'
  })
}
const itemIdList = ref([])
const itemsMoreInfoList = ref([])
const itemsNum = ref(0)
function getItemsIdList() {
  getItemsId({}).then((res) => {
    itemIdList.value = res.data.data
    itemsNum.value = itemIdList.value.length
    for (let i = 0; i < itemsNum.value; i++) {
      getItemsMoreInfo({
        id: itemIdList.value[i].id
      }).then((res) => {
        itemsMoreInfoList.value[i] = res.data.data
      })
    }
  })
}

const showdevelTeamList = ref([])
function showInfoMemberList() {
  for (let i = 0; i < itemsMoreInfoList.value.length; i++) {
    showdevelTeamList.value[i] = getMenberInfoFn(
      itemsMoreInfoList.value[i].develTeam.teamMemberIds
    )
  }
}

function getMenberInfoFn(idList) {
  console.log(idList.length)
  const itemMenberList = ref([])
  for (let i = 0; i < idList.length; i++) {
    getMenberSelfInfo({
      id: idList[i]
    }).then((res) => {
      itemMenberList.value[i] = res.data.data
    })
  }
  return itemMenberList.value
}

const showIf = ref(false)
setTimeout(() => {
  showInfoMemberList()
}, 500)
setTimeout(() => {
  showIf.value = true
  console.log(showdevelTeamList.value)
}, 1000)

getItemsIdList()
</script>

<style lang="scss">
.itemsList {
  width: 100%;
  margin-top: 50rpx;

  .items {
    margin-top: 50rpx;
    padding: 20rpx;
    width: 90%;
    height: 200rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-left: 2.5%;
    border-radius: 10rpx;
    background: linear-gradient(to right, #87d5f2, #96c4f5);
    box-shadow: rgba(99, 99, 99, 0.2) 5rpx 5rpx 8rpx 5rpx;

    .top {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      .itemName {
        font-weight: 600;
        margin-left: -100rpx;
        font-size: 40rpx;
      }
      .learnMore {
        color: gray;
        margin-right: -100rpx;
        display: flex;
        flex-direction: column;
      }
      image {
        height: 50rpx;
        width: 50rpx;
        float: right;
        margin-top: 10rpx;
        margin-left: 120rpx;
      }
    }

    // .bottom {
    //   display: flex;
    //   flex-direction: row;
    //   float: left;
    //   margin-top: -65rpx;
    //   margin-left: -270rpx;
    //   .menbersImg {
    //     display: inline;
    //     height: 300rpx;
    //     width: 120rpx;
    //     margin-top: 30rpx;
    //     justify-content: space-around;
    //   }
    // }
  }
}

// 容器
.scrollContainer {
  margin-left: -150rpx;
  margin-top: -35rpx;
  width: 550rpx;
  height: 234rpx;
  white-space: nowrap;
}

// 容器项
.scrollitem {
  display: inline-block;
  margin-left: 30rpx;
  height: 234rpx;
  width: 110rpx;
}
</style>
